<template>
	<view>
		<view class="data-box">
			<view class="form-block">
				<view class="card">
					<view class="card-body">
						<u--form
						class="from-card"
						labelPosition="left"
						labelWidth="80">
							<u-form-item :label="`${ typeName }人`" borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.userName"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item :label="`${ typeName }类型`" required borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.type"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item label="开始时间" required borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.beginTime"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item label="结束时间" required borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.endTime"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item :label="`${ typeName }事由`" required borderBottom>
								<u--textarea
								disabled
								disabledColor="#ffffff"
								v-model="info.reason"
								autoHeight>
								</u--textarea>
							</u-form-item>
							<u-form-item label="提交人" borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.createBy"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item label="时长" borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.duration"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
						</u--form>
					</view>
				</view>
			</view>
		</view>
					
		<uni-group v-if="imageList.length>0">
			<u--form
			class="from-card"
			labelPosition="top"
			labelWidth="180">
				<u-form-item label="图片">
					<u-upload
						:fileList="imageList"
						:multiple="true"
						:maxCount="imageList.length"
						:disabled="true"
						:deletable="false">
					</u-upload>
				</u-form-item>
			</u--form>
		</uni-group>
		
		<uni-section title="流程" type="line">
			<view class="per-list per-all">
				<view v-for="(item,index) in flowTaskList">
					<view class="list_user">
						<view class="left">
							<u-avatar
								v-if="item.avatar"
								:src="item.avatar"
								customStyle="width:100%;height:100%;"
								shape="square"
								size="35">
							</u-avatar>
							<u-avatar
								v-else
								customStyle="width:100%;height:100%;"
								:text="item.userName.slice(1)"
								bgColor="#0087FC"
								shape="square"
								size="35"
								:fontSize="item.userName.length > 2?12:15">
							</u-avatar>
							<view class="list_left_icon">
								<icon class="icon-box-img" type="waiting" size="15" color="#DD8E59" v-if="item.status == '0'"></icon>
								<icon class="icon-box-img" type="success" size="15" v-if="item.status == '1'"></icon>
								<icon class="icon-box-img" type="warn" size="15" v-if="item.status == '2'"></icon>
							</view>
						</view>
						<view class="right">
							<view class="line1"><text>审批人</text><text v-if="item.status=='1'||item.status=='2'">{{item.updateTime}}</text></view>
							<view class="line2">
								<text>{{item.userName+(item.status == '2'?'(已拒绝)':'')}}</text>
							</view>
						</view>
					</view>
					
					<view class="list_user" v-if="item.status == '2'">
						<view class="left"></view>
						<view class="right">
							<!-- 拒绝理由 -->
							<view class="line3">
								<text>{{item.opinion}}</text>
							</view>
						</view>
					</view>

					<view class="list_line" v-if="index != flowTaskList.length-1"><view class="line"></view></view>
					<!-- <view class="list_line"><view class="lineDash"></view></view> -->
				</view>
				<view style="margin-top: 40rpx;" v-if="flowCsList && flowCsList.length > 0">
					<text>抄送人</text>
					<view class="per-list-csr" style="margin-top: 10rpx;">
						<view class="csr-item" v-for="(item,index) in flowCsList">
							<view class="pers-pic">
								<u-avatar
									v-if="item.avatar"
									:src="item.avatar"
									shape="square"
									size="35">
								</u-avatar>
								<u-avatar
									v-else
									:text="item.userName.slice(1)"
									bgColor="#0087FC"
									shape="square"
									size="35"
									:fontSize="item.userName.length > 2?12:15">
								</u-avatar>
								<view style="margin-top: 10rpx;">
									<text class="pers-name">{{item.userName}}</text>
								</view>
							</view>
							<view class="csr-icon" v-if="index != flowCsList.length-1">
								<u-icon name="plus" color="#cdcdcd" size="20rpx" bold></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-section>
		<view class="" style="height: 180rpx;"></view>
		<view class="submit-button" v-if="info.status == 0&&spType == '用户'">
			<view style="background-color: #9a9d9f;" class="submit-block" @click="submit()">
				撤 销
			</view>
		</view>
		<view class="submit-button" v-if="info.status == 0&&spType == '审批'">
			<view class="submit-block">
				<view class="submit-block_item" @click="gotoApprovePage('1')">同 意</view>
				<view class="submit-block_item" @click="gotoApprovePage('2')">拒 绝</view>
			</view>
		</view>
		
		<view class="qz">
			<span v-if="info.status == 1"><image src="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/49d884b6a24c4f9cb645b551a974dec3.png" /></span>
			<span v-if="info.status == 2"><image src="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/a2ef1372c79d42aeb3adec735fd6826e.png" /></span>
			<span v-if="info.status == 3"><image src="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/87530e13f0954b08b12f43b8998a6e14.png" /></span>
		</view>
	</view>
</template>

<script>
	import { getInfo,revoke } from '@/api/vacation.js'
	import { getJBInfo,revokeJB } from '@/api/workover.js'
	export default {
		data() {
			return {
				spType:'用户',
				id:'',
				type:'',
				imageList:[],
				amountAll:0,
				info:{},
				expenseDetailList:[],
				flowTaskList:[],
				flowCsList:[],
				typeName:'请假',
				during:'',
				czId:''
			}
		},
		onLoad(option) {
			this.spType = option.spType
			this.id = option.id
			this.type = option.type
			this.czId = option.id
			if(this.type == '加班'){
				this.typeName = '加班'
			}else if(this.type == 'qj') {
				this.typeName = '请假'
			}
			this.getDetail(option.id)
		},
		methods: {
			gotoApprovePage(statusType){
				if (statusType=="1") {
					uni.navigateTo({
						url: '/subPackTask/work/cy/mysp/opinion?status=1&type='+this.type+'&tbId='+this.info.id+'&czId='+this.czId,
						events: {
							refreshPage: (data) => {
								this.$emit('refreshPage', data);
								// 触发传递给列表页的事件
								const eventChannel = this.getOpenerEventChannel();
            		eventChannel.emit('refreshPage', data);
							}
						}
					});
				}else{
					uni.navigateTo({
						url: '/subPackTask/work/cy/mysp/opinion?status=2&type='+this.type+'&tbId='+this.info.id+'&czId='+this.czId,
						events: {
							refreshPage: (data) => {
								this.$emit('refreshPage', data);
								// 触发传递给列表页的事件
								const eventChannel = this.getOpenerEventChannel();
            		eventChannel.emit('refreshPage', data);
							}
						}
					});
				}
			},
			submit(){
				uni.showModal({
				  content: '确定要撤销申请吗？',
				  showCancel: true,
				  confirmText: '确定',
				  cancelText: '取消',
				  success: res => {
				    if (res.confirm) {
						this.doRevoke(this.id)
				    }
				  }
				})
			},
			async doRevoke(id){
				if(this.type == '加班') {
					const { data } = await revokeJB(id);
					if(data.code == 200){
						uni.showToast({
							title: '撤销成功'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							});
						}, 500)
					}
				}else {
					const { data } = await revoke(id);
					if(data.code == 200){
						uni.showToast({
							title: '撤销成功'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							});
						}, 500)
					}
				}

			},
			async getDetail(id){
				if(this.type == '加班') {
					let { data } = await getJBInfo(id);
					if(data.code == 200){
						this.info = data.data
						this.flowTaskList = data.data.flowTaskList
						this.flowCsList = data.data.flowCsVoList
						var text = data.data.type == '按天'? '天':'小时'
						this.info.duration = this.info.duration+text
						console.log(this.flowTaskList)
						if(data.data.images!=''){
							data.data.images.split(',').forEach(e=>{
								this.imageList.push({url:e})
							})
						}
					}
				}else {
					let { data } = await getInfo(id);
					if(data.code == 200){
						this.info = data.data
						this.flowTaskList = data.data.flowTaskList
						this.flowCsList = data.data.flowCsVoList
						this.info.duration = this.info.duration+'天'
						console.log(this.flowTaskList)
						if(data.data.images!=''){
							data.data.images.split(',').forEach(e=>{
								this.imageList.push({url:e})
							})
						}
					}
				}
			},
		}
	}
</script>

<style>
.per-list.per-all {
	padding: 30rpx;
}
.list_user {
	display: flex;
	justify-content: space-between;
}
.list_user .left {
	position: relative;
	width: 2.5rem;
	font-size: 1em !important;
}
.list_left_icon {
	position: absolute;
	bottom: 0;
	right: 0;
}
.list_user .right {
	width: 85%;
	height: 2.5rem;
}
.list_user .right .line1 {
	display: flex;
	justify-content: space-between;
	color: #999;
}
.list_user .right .line2 {
	color: #666;
}
.list_user .right .line3 {
	padding: 10rpx;
	background-color: #d4d4d4;
	border-radius: 0 10rpx 10rpx 10rpx;
	line-height: 2;
	color: #666;
	font-size: 25rpx;
}
.list_line {
	width: 10%;
	text-align: center;
	margin: 10rpx 0;
}
.list_line .line {
	display: inline-block;
	vertical-align: middle;
	height: 60rpx;
	border-left: 6rpx solid #aaa;
	border-radius: 5rpx;
}
.list_line .lineDash {
	display: inline-block;
	vertical-align: middle;
	height: 60rpx;
	border-left: 6rpx dashed #aaa;
	border-radius: 5rpx;
}

	.per-list {
		margin-right: 50rpx;
	}
	
	.pers-pic {
		height: 65rpx;
	}
	
	.pers-name {
		color: #a5a5a5;
		font-size: 25rpx;
		width: 50rpx;
	}
	
	.pers-icon {
		position: relative;
		top: -80rpx;
		left: 85rpx;
		width: 26rpx;
	}
	
	.card-plus-t {
		display: flex;
		/* flex-direction: row-reverse; */
		/* justify-content: right; */
		text-align: center;
	}
	.submit-block_item {
		box-sizing: border-box;
		vertical-align: middle;
		display: inline-block;
		width: 50%;
		background-color: #0087FC;
	}
	.submit-block_item:nth-child(1) {
		border-right: 2rpx solid #fff;
	}
	.submit-block_item:nth-child(2) {
		background-color: #9a9d9f;
	}
	.per-list-csr {
		display: flex;
		justify-content: left;
	}
	.per-list-csr .csr-item {
		text-align: center;
		display: flex;
	}
	.csr-item .csr-icon  {
		display: flex;
		margin: 0 10rpx;
	}
	
	.qz {
	  position: absolute;
	  right: 80rpx;
	  top: 40rpx;
	}
	.qz image {
	  width: 150rpx;
	  height: 150rpx;
	}
	.list_left_icon {
		background-color: #fff;
		border-radius: 50%;
	}
	.list_left_icon icon{
		vertical-align: bottom;
		display: block;
	}
	.submit-button .submit-block {
		background-color: #fff;
	}
</style>